<template>
    <div class="box">
        <img :src="userInfo.userBack" width="100%" height="100%" alt="">
        <!-- 资料卡 -->
        <div class="userInfo">
            <!-- 头像 -->
            <div class="header">
                <input type="file" multiple ref="head" @change="toHead">
                <img  width="55px" style="border-radius:50% ;" height="55px" :src="userInfo.userHeader" alt="">
                <img style="opacity:0" src="@/assets/V.png">
            </div>
            <!-- 个人信息 -->
            <div class="info">
                <p style="color:#fff">{{userInfo.userName}}
                    <button style="background:rgb(214, 98, 98);width:auto;padding-left:5px;padding-right:5px" class="vip" v-if="userInfo.userVip>0">ID:{{userInfo.userId}}</button>
                    <button class="vip" v-if="userInfo.userVip>0">VIP{{userInfo.userVip}}</button>
                    <button style="background:#747371" class="vip">SV{{userInfo.userSv}}</button>
                <button style="background:#f1b9c3" class="vip" v-if="userInfo.userSex==0">♀</button>
                <button style="background:#1e9bd7" class="vip" v-if="userInfo.userSex==1">♂</button>
                </p>
                <input :value="userInfo.userMess" class="mess" :disabled="!userInfo.isMy" @blur="updateMess" type="text">
            </div>
        </div>
        <!-- 切换背景 -->
        <div class="toggerBackground">
            <div class="upback"   v-if="userInfo.isMy">
                <input @change="toggerBack" ref="addimg"  type="file" multiple name="file">
                <button class="togger">切换封面</button>

            </div>
            <button class="togger" v-else @click="gz">关注</button>
        </div>
    </div>
</template>

<script>
export default {
    props:["userInfo"],
    data(){
        return{
            isMy:false,
        }
    },
    methods:{
        gz(){
             this.$http.put("/fans/addfans/"+this.userInfo.userId).then(va => {
                this.$alert(va.data.message)
            })
        },
        isAuther(){
            // 判断是否是作者
        },
        updateMess(v){
            
            if(v.target.value.length>30){
                this.$alert("内容长度超出30")
                return ;
            }
            this.$emit("updatemess",v.target.value)

        },
        toHead(){
             var file = this.$refs.head.files[0]
            
            if(file.type.split("/")[0]!="image"){this.$alert("仅支持 jpg png gif 格式文件");return}
            let parm = new FormData();
            parm.append('file',file,file.name);
            parm.append('chunk','0')
            let config ={
                   headers: { 'Content-Type': 'multipart/form-data' }
            }
            this.$http.post("/file/uphead",parm,config).then(va=>{
                if(va.data.code==200){
                    this.$alert(va.data.message)
                    this.userInfo.userHeader=va.data.data
                }else if(va.data.code==301){
                    this.$alert(va.data.message)
                    this.$router.push("/")
                }else{
                    this.$alert(va.data.message)
                }

            })
        },
        toggerBack(){
             var file = this.$refs.addimg.files[0]
            
            if(file.type.split("/")[0]!="image"){this.$alert("仅支持 jpg png gif 格式文件");return}
            let parm = new FormData();
            parm.append('file',file,file.name);
            parm.append('chunk','0')
            let config ={
                   headers: { 'Content-Type': 'multipart/form-data' }
            }
            this.$http.post("/file/upback",parm,config).then(va=>{
                if(va.data.code==200){
                    this.$alert(va.data.message)
                    this.userInfo.userBack=va.data.data
                }else if(va.data.code==301){
                    this.$alert(va.data.message)
                    this.$router.push("/")
                }else{
                    this.$alert(va.data.message)
                }

            })
        }
    },
    created(){
        
        // 判断是否为自己
        var bc = sessionStorage.getItem("BC")
        var bid = window.atob(window.atob(bc));
        if(this.userInfo.userId==bid){
            this.isMy=true
        }    else{
            this.isMy=false
        }
    }
}
</script>

<style scoped lang="less">
    .box{
        width: 100%; 
        height:200px;
        position: relative;
        
        .userInfo{
            width: auto;
            height: 90px;
            position: absolute;
            bottom: 0px;
            padding: 10px;
            display: flex;
            .header{
                width: 30%;
                height: 100%;
                position: relative;
                input{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                }
            }
            .info{
                width: auto;
                height: 100%;
                margin-left: 10px;
                padding-top: 15px;
                position: relative;
                .mess{
                    background: none;
                    border: none;
                    outline: none;
                    font-family: ht;
                    color: rgb(100, 98, 98);
                    width: 200px;
                    height: 20px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    
                }
                .mess:hover{
                    width: 300px;
                    color: red;
                }
                p{
                    width:300px;
                    position: relative;
                    line-height: 25px;   
                }
                .vip{
                    margin-left: 5px;
                    border-radius: 15px;
                    width: 40px;
                    height: 15px;
                    background: #f21a38;
                    color: #fff;
                    border: none;
                    text-align: center;
                    font-size: 10px;
                }
            }
        }
        .toggerBackground{
            
            width: 100px;
            height: 55px;
            position: absolute;
            bottom: 0px;
            right: 0;
            // background: red;
            padding: 10px;
            .togger{
                background: #ffcd35;
                width: 80px;
                height: 30px;
                border: none;
                text-align: center;
                color: #fff;
                border-radius: 10px;
                cursor: pointer;
            }
        }
    }
    .header img:first-child{
        display: block;
        text-align: center;
        margin: 10px auto;
        }
    .header img:last-child{
        position: absolute;
        bottom: 5px;right: 0px;
        width: 20px;height: 20px;
    }
    .upback{
        width: auto;
        height: 30px;
        position: relative;
        input{
            cursor: pointer;
            position: absolute;
            height: 100%;
            opacity: 0;
            width: 100%;
        }
    }
</style>